<template>
  <div ref="tips" v-show="is_show" class="tips">
    <slot></slot>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "Tips",
  data() {
    return {
      is_show: false,
      msg: ''
    }
  },
  methods: {
    show(msg) {
      this.msg = msg;
      this.is_show = true;
      setTimeout(() => {
        this.is_show = false;
      }, 2000);
    }
  }
};
</script>
<style scoped lang="less">
.tips {
  position: absolute;
  left: 50%;
  bottom: 40%;
  transform: translate(-50%, -50%);
  padding: .25rem .35rem;
  border-radius: .2rem;
  background: rgba(0, 0, 0, .6);
  color: #FFFFFF;
}
</style>
